<template>
<div>
<!--1.导航面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{path: '/dashBook'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item>学员信息管理</el-breadcrumb-item>
    <el-breadcrumb-item>首页</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card style="margin-top: 10px;">
<!--    1.模糊查询-->
    <el-form :model="queryGrade" :inline="true" style="width: 60%">
      <el-form-item label="年级名称">
      <el-input v-model="queryGrade.gradeName" placeholder="请输入需要查询的年级名称"
                clearable @clear="getGradeList" @keyup.enter.native="getGradeList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-botton type="info" class="el-icon-refresh-left" plain>重置</el-botton>
        <el-botton  type="primary" class="el-icon-search" plain @click="">查询</el-botton>
      </el-form-item>
    </el-form>
    <div>
      <el-botton size="small" type="success" class="el-icon-folder-add" plain>新增</el-botton>
      <el-botton size="small" type="danger" class="el-icon-delete" plain>批量删除</el-botton>
    </div>
<!--    2.列表table-->
    <el-table :data="gradeList" boeder stripe style="width: 70%"
    @selection-change="handleSelectionCahnge">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="年级编号" prop="gradeId"></el-table-column>
      <el-table-column label="年级名称">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>年级名次：{{scope.row.gradeName}}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{scope.row.gradeName}}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button size="small" type="success" class="el-icon-edit" @click="editShowDialog(scope.row.classid)">编辑</el-button>
        <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
      </el-table-column>
    </el-table>
<!--    3.分页-->
<!--    4.新增和编辑-->
  </el-card>
</div>
</template>

<script>
export default {
  name: "GradeManage",
  data() {
    return {
      queryGrade: {
        pageNum: 1, //页码
        pageSize: 10,// 每页显示多少条
        gradeName: ''//按照年级名称去查询
      }
    }
  },
  /*vue 生命周期函数*/
  created(){
    //当我们的页面在浏览器上面被创建的时候需要调用created(）方法
    this.getGradeList() //抽象方法
  },

  methods: {
    handleSelectionCahnge() {},
    // 实现方法，里面包裹的是具体操作步骤 结构用大括号包裹起来
    getGradeList() {
      //1.
      //2.
      //3.
    },
  }
}
</script>

<style scoped>

</style>
